<template>
  <view class="ep-picker-box">
    <!-- 蒙版区域 开始 -->
    <view class="ep-mask-box" v-show="show1" @click="show1=false"></view>
    <!-- 蒙版区域 开始 -->
    <!-- 输入框区域 开始 -->
    <view class="ep-input-box" @click="openOptions" :class="{'disabled':disabled}">
      <view style="display: flex;align-items: center;min-height: 36px;">{{showLabel}}</view>
      <text v-if="!show1" class="iconfont icon-xiala"></text>
      <text v-else class="iconfont icon-xialashang"></text>
    </view>
    <!-- 输入框区域 结束 -->
    <!-- 弹出的下拉区域 开始 -->
    <view v-show="show1" class="ep-picker-content-wrap">
      <scroll-view class="ep-picker-content" :scroll-y="true">
        <!-- 展示下拉项列表 开始 -->
        <view v-for="item in options" :key="item[value_key]"
              :class="{'disabled':item.disabled,'active':value==item[value_key]}" class="option-item"
              @click="itemClick(item)">{{item[label_key]}}
        </view>
        <!-- 展示下拉项列表 结束 -->
        <!-- 下拉列表为空 开始 -->
        <view v-if="options.length==0" class="option-no-data">无数据</view>
        <!-- 下拉列表为空 结束 -->
      </scroll-view>
      <text class="triangle"></text>
    </view>
    <!-- 弹出的下拉区域 结束 -->
  </view>
</template>

<script setup>
import {ref, reactive} from 'vue'
// 封装select下拉框组件
const select = ref('');
const show1 = ref(false);
const value_key = ref('value')
const label_key = ref('label')
const showLabel = ref('+86')
const disabled = ref(false)
const options = reactive([{
  value: "1",
  label: "+86"
}, {
  value: "2",
  label: "+32"
}, {
  value: "3",
  label: "+57",
}])
const openOptions = () => {
  show1.value = !show1.value
}
const itemClick = (item) => {
  showLabel.value = item.label
  show1.value = !show1.value
}
</script>

<style scoped lang="scss">
.ep-picker-box {
  width: 100rpx;
  box-sizing: border-box;
  position: relative;
  font-size: 14px;
  color: #333;
  // max-width: 300px;
}

.ep-mask-box {
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: none;
}

.ep-input-box {
  border: 1px solid rgb(229, 229, 229);
  border-radius: 4px;
  padding-left: 24rpx;
  position: relative;
  cursor: pointer;
}

/* 整个下拉组件禁用样式 */
.ep-input-box.disabled {
  cursor: not-allowed;
  background-color: #f5f7fa;
  color: #999;
}

/* 展开收起箭头样式 */
.ep-input-box .iconfont {
  position: absolute;
  top: 50%;
  right: 5px;
  font-size: 20px;
  transform: translateY(-50%);
  color: #B8B8B8;
}

/* 下拉容器样式 外层 */
.ep-picker-content-wrap {
  width: 100%;
  position: absolute;
  top: 45px;
  left: 0;
  z-index: 9999;
  padding-top: 6px;
}

/* 下拉容器样式 内层 */
.ep-picker-content-wrap .ep-picker-content {
  background-color: #fff;
  padding: 3px 0;
  box-shadow: 0 0 20px 5px rgb(0 0 0 / 30%);
  border-radius: 5px;
  max-height: 181px;
}

/* 下拉项通用样式 */
.ep-picker-content-wrap .ep-picker-content .option-item {
  padding: 24rpx 24rpx;
  cursor: pointer;
}

/* 无下拉项数据时样式 */
.ep-picker-content-wrap .ep-picker-content .option-no-data {
  padding: 24rpx 24rpx;
  cursor: text;
  color: #999;
  text-align: center;
}

/* 鼠标移入下拉项样式 */
.ep-picker-content-wrap .ep-picker-content .option-item:hover {
  background-color: #f5f7fa;
}

/* 已选中的下拉项样式 */
.ep-picker-content-wrap .ep-picker-content .option-item.active {
  color: #007AFF;
}

/* 禁用的下拉项样式 */
.ep-picker-content-wrap .ep-picker-content .option-item.disabled {
  color: #c0c4cc;
}

.ep-picker-content-wrap .ep-picker-content .option-item.disabled:hover {
  cursor: not-allowed;
}

/* 下拉容器指示箭头样式 */
.ep-picker-content-wrap .triangle {
  width: 0;
  height: 0;
  border-top: 6px solid rgba(0, 0, 0, 0);
  border-right: 6px solid rgba(0, 0, 0, 0);
  border-bottom: 6px solid #fff;
  border-left: 6px solid rgba(0, 0, 0, 0);
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: content-box;
}
</style>